<%--
  Created by IntelliJ IDEA.
  User: 张洪瑞
  Date: 2021-6-17  0017
  Time: 下午 16:45:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!-- 引入 layui.css -->
    <!--pageContext.request.contextPath:获取项目的路径 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<div>
    <form class="layui-form layui-form-pane" action="register" id="demo2" style="margin-top: 5px;margin-left: 100px;">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 62px;"><i class="layui-icon layui-icon-cellphone" style="font-size: 25px; color: #1E9FFF;font-weight: bold;"></i></label>
            <div class="layui-input-inline">
                <input type="text" id="phonetext" name="phone" lay-verify="required|phone|phonecheck" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 62px;"><i class="layui-icon layui-icon-password" style="font-size: 25px; color: #1E9FFF;font-weight: bold;"></i></label>
            <div class="layui-input-inline">
                <input type="password" name="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 62px;"><i class="layui-icon layui-icon-password" style="font-size: 25px; color: #1E9FFF;font-weight: bold;"></i></label>
            <div class="layui-input-inline">
                <input type="password" name="password1" lay-verify="required|equalpw" placeholder="请确认密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 62px;"><i class="layui-icon layui-icon-username" style="font-size: 25px; color: #1E9FFF;font-weight: bold;"></i></label>
            <div class="layui-input-inline">
                <input type="text" name="username" placeholder="请输入昵称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 62px;"><i class="layui-icon layui-icon-ok" style="font-size: 25px; color: #1E9FFF;font-weight: bold;"></i></label>
                <div class="layui-input-inline" style="width: 110px;">
                    <input type="text" name="checkcode" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width: 50px;">
                    <a href="javascript:void(0)" id="checkcode1"><img src="${pageContext.request.contextPath}/CheckCodeUtil" alt="" style="width:70px;height: 38px;" id="imgcode1"></a>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <button type="submit" lay-submit="" lay-filter="demo2" class="layui-btn layui-btn-normal layui-btn-lg" style="width: 252px;">注册</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    layui.use(['form','layer','jquery'], function(){ //独立版的layer无需执行这一句
        var form = layui.form
            , layer = layui.layer //独立版的layer无需执行这一句
            ,$ = layui.jquery
        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '至少得5个字符';
                }
            }
            ,pass: [
                /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
                ,'密码必须6到16位，且必须是字母和数字的组合'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            },
            equalpw:function (value) {
                if ($('input[name=password]').val() !== value) {
                    return "两次输入的密码不一致";
                }
            },

            phonecheck:function (value) {
                //构建json数据
                var json = {"phoneString":value};
                var flag = false;
                $.ajaxSettings.async = false;//设置AJAX同步
                $.post("checkPhone",json,function (data) {//将json数据提交给UserController中的/checkPhone
                    if (data==="1"){    //若在数据库中查询到手机号则返回"1"，否则返回"0"
                        flag=true;
                    }
                });
                if (flag){
                    return "该手机号已被注册过";
                }
            }
        });
        //监听提交
        form.on('submit(demo2)', function(data){
            // layer.msg(JSON.stringify(data.field)),{//将表单中的数据显示出来
            //     title:'最终的提交信息'
            // }
            var checkcodeText = data.field.checkcode;
            var json = {"checkcode":checkcodeText,"json":JSON.stringify(data.field)}//准备json数据
            //完成ajax操作
            $.post("register.do",json,function (data) {
                if (data === "1"){
                    layer.msg("恭喜注册成功！",{icon:1});
                }else if (data === "-1"){
                    layer.msg("验证码错误！",{icon:5});
                }else{
                    layer.msg("注册失败，请检查！",{icon:5});
                }
            });
            return false;
        });
        $(function () {
            $('#checkcode1').click(function () {
                $('#imgcode1').attr('src','${pageContext.request.contextPath}/CheckCodeUtil?time='+new Date().getTime());
            });
            //获取服务器返回的信息
            var loginmsg = "${loginmsg}";
            if (loginmsg != ""){
                layer.msg(loginmsg,{icon:5});//弹出登陆的提示信息
            }
        });
    });

</script>
</html>
